<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap-reboot.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .container {
/*            width: 934px;*/
            min-height: 340px;
            /*margin: 0 auto;*/
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /*			padding: 20px;*/
            box-sizing: border-box;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: left;
        }

        .div_content {
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all; /* 内容自动换行 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
        }

        .fixed-row {
            background-color: #d9edf7;
        }

        .fixed-cell-1 {
            width: 25px;
        }

        .fixed-cell-2 {
            width: 300px;
            font-size: 12px;
        }

        .fixed-cell-3 {
            width: 40px;
        }

        .fixed-cell-4 {
            width: 200px;
        }

        .fixed-cell {
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

            .fixed-cell:hover {
                position: absolute;
                z-index: 1;
                background: white;
                border: 1px solid #ccc;
                width: auto;
                height: auto;
                overflow: visible;
                white-space: normal;
                text-overflow: clip;
            }
        /* Modal 样式 */
        .modal {
            display: block;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            min-height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
        /* 限制弹窗中的图片大小 */
        .modal-img {
            max-width: 100%;
            max-height: 150px; /* 控制图片最大高度为300px */
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <table class="table table-striped">
            <thead class="thead-dark">
                <tr>
                    <th class="fixed-cell-1">行</th>
                    <th class="fixed-cell-2">内容</th>
                    <th class="fixed-cell-3">锁</th>
                    <th class="fixed-cell-4">备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in items" :key="index" :class="{ 'fixed-row': item.isFixed }">
                    <td class="fixed-cell-1">{{ index + 1 }}</td>
                    <td class="fixed-cell-2" v-if="item.contentType == 0" @click="click(item.content)"><div class="div_content">{{ item.content }}</div></td>
                    <td class="fixed-cell-2" v-if="item.contentType == 1" @click="click(item.remark)"><img class="div_content" :src="item.content" alt="示例图片"></td>
                    <td class="fixed-cell-3" @click="moveToTop(index, item)">{{ item.isFixed ? '是' : '否' }}</td>
                    <td class="fixed-cell-4">
                        <!-- 当 content 不是时间戳时，显示按钮 -->
                        <div v-if="isTimestamp(item.content)">
                            <input type="text" v-model="item.remark" />&nbsp;<button @click="getTimestamp(item.remark)">时间戳</button>&nbsp;<button v-if="isZeroClockTime(item.content)" @click="zeroClockTime(item.content)">该日0点</button>
                        </div>
                        <div v-else-if="item.contentType == 0">
                            <button @click="generateQRCode(item.content)">码</button>
                            <button @click="accessImage(item.content)">图</button>
                        </div>
                        <!-- 正常显示 remark -->
                        <div v-else>{{ item.remark }}</div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- Modal 弹窗 -->
        <div v-if="showModalFlag" class="modal">
            <div class="modal-content">
                <span class="close" @click="closeModal">&times;</span>
                <div v-html="modalContent"></div>
            </div>
        </div>

        <!-- <div><input id="test_content" v-model="test_content" /></div>
        <button class="btn btn-primary" @click="addItem(test_content)">Add Row</button> -->
    </div>

    <script src="./vue.js"></script>
    <script src="./qrcode.min.js"></script>
    <script>
        var myVue = new Vue({
            el: '#app',
            data: {
                items: [],
                test_content: '',
                TopestInex: 0,
                showModalFlag: false, // 控制弹窗的显示和隐藏
                modalContent: '',     // 弹窗内容
            },
            methods: {
                addItem(content, remark, contentType) {
                    // 修改部分：增加判断逻辑
                    let item = this.processContent(content, remark, contentType);
                    this.addOneItem(item);
                    // this.addOneItem({ content: content, isFixed: false, remark: remark });
                    this.items.splice(20, 2);//只保留20个
                },
                addOneItem(item) {
                    this.items.splice(this.TopestInex, 0, item);
                },
                click(content) {
                    jsClickItem(content);
                },
                moveToTop(index, item) {
                    console.log(item.isFixed);
                    console.log(this.TopestInex);
                    if (!item.isFixed) {
                        console.log("top");
                        this.items.splice(index, 1);
                        this.items.splice(this.TopestInex, 0, item);
                        // this.items.splice(this.moveToIndex - 1, 0, item);
                        this.TopestInex++;
                    } else {
                        this.TopestInex--;
                        this.items.splice(index, 1);
                        this.addOneItem(item)
                    }
                    item.isFixed = !item.isFixed;
                },
                processContent(content, remark, contentType) {
                    let item = { content: content, isFixed: false, remark: remark, contentType: contentType };
                    // 判断是否为时间戳
                    if (this.isTimestamp(content)) {
                        let timestamp = parseInt(content);
                        // 判断是秒级还是毫秒级
                        if (content.toString().length === 10) {
                            timestamp *= 1000; // 如果是秒级时间戳，转换为毫秒
                        }
                        let date = new Date(timestamp);
                        let formattedDate = this.formatDate(date);
                        if (content.toString().length === 13) {
                            formattedDate += ` ${date.getMilliseconds()}毫秒`;
                        }
                        item.remark = formattedDate;
                    } else {
                        // 如果不是时间戳，content 保留原样
                        // item.remark = "";
                    }
                    return item;
                },
                isTimestamp(content) {
                    // 判断是否是一个秒级或毫秒级时间戳
                    let timestamp = parseInt(content);
                    return !isNaN(timestamp) && (content.toString().length === 10 || content.toString().length === 13);
                },
                formatDate(date) {
                    let year = date.getFullYear();
                    let month = ('0' + (date.getMonth() + 1)).slice(-2);
                    let day = ('0' + date.getDate()).slice(-2);
                    let hours = ('0' + date.getHours()).slice(-2);
                    let minutes = ('0' + date.getMinutes()).slice(-2);
                    let seconds = ('0' + date.getSeconds()).slice(-2);
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
                accessImage(content) {
                    // 访问图片的逻辑
                    let imgTag = `<img src="${content}"  class="modal-img" alt="访问的图片">`;
                    this.showModal(imgTag);
                },
                showModal(content) {
                    // 展示弹窗
                    this.modalContent = content;
                    this.showModalFlag = true;
                },
                closeModal() {
                    // 关闭弹窗
                    this.showModalFlag = false;
                    this.modalContent = '';
                },
                generateQRCode(content) {
                    // 生成二维码并返回base64编码
                    QRCode.toDataURL(content, { errorCorrectionLevel: 'H' }, (err, url) => {
                        if (err) {
                            console.error(err);
                            return;
                        }
                        this.showModal(`<img src="${url}"  class="modal-img" alt="二维码">`);
                    });
                },
                zeroClockTime(timestamp) {
                    // 将时间戳转换为日期对象
                    const date = new Date(timestamp * 1000);

                    // 将时间部分设为0点
                    date.setHours(0, 0, 0, 0);

                    // 将日期转换回时间戳
                    const newTimestamp = Math.floor(date.getTime() / 1000);
                    this.copyText(newTimestamp)
                },
                isZeroClockTime(timestamp) {
                    return (timestamp + 8 * 3600) % 86400 !== 0;
                },
                getTimestamp(timeString) {
                    this.copyText(new Date(timeString).getTime() / 1000);
                },
                copyText(text) {
                    // 尝试将文本复制到剪贴板
                    navigator.clipboard.writeText(text)
                      .then(() => {
                        console.log('文本已成功复制到剪贴板！');
                      })
                      .catch(err => {
                        console.error('无法复制文本到剪贴板：', err);
                      });
                }
            }
        });
        function jsAddItem(content, remark = '', contentType = 0) {
            myVue.addItem(content, remark, contentType)
        }
        function jsClickItem(content) {
            window.cefjsbridge.jsClickItem(content)
        }
    </script>
</body>
</html>
